"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import Sidebar from "@/components/sidebar"
import MainInterface from "@/components/main-interface"
import ProjectManagement from "@/components/project-management"
import TemplateManagement from "@/components/template-management"
import DataManagement from "@/components/data-management"
import ResultManagement from "@/components/result-management"
import UserManagement from "@/components/user-management"

export type ActiveTab = "main" | "projects" | "templates" | "data" | "results" | "users"

export default function HomePage() {
  const [activeTab, setActiveTab] = useState<ActiveTab>("main")
  const [selectedProject, setSelectedProject] = useState<string>("")
  const [selectedTemplate, setSelectedTemplate] = useState<string>("")
  const [selectedData, setSelectedData] = useState<string>("")
  const [sidebarWidth, setSidebarWidth] = useState<number>(256) // 默认宽度为256px (16rem)

  const isDraggingRef = useRef<boolean>(false)
  const containerRef = useRef<HTMLDivElement>(null)

  const handleMouseDown = (e: React.MouseEvent) => {
    e.preventDefault()
    isDraggingRef.current = true
    document.addEventListener("mousemove", handleMouseMove)
    document.addEventListener("mouseup", handleMouseUp)
  }

  const handleMouseMove = (e: MouseEvent) => {
    if (!isDraggingRef.current || !containerRef.current) return

    const containerRect = containerRef.current.getBoundingClientRect()
    const newWidth = e.clientX - containerRect.left

    // 限制最小宽度为160px，最大宽度为容器宽度的1/3
    const minWidth = 160
    const maxWidth = containerRect.width / 3

    if (newWidth >= minWidth && newWidth <= maxWidth) {
      setSidebarWidth(newWidth)
    }
  }

  const handleMouseUp = () => {
    isDraggingRef.current = false
    document.removeEventListener("mousemove", handleMouseMove)
    document.removeEventListener("mouseup", handleMouseUp)
  }

  useEffect(() => {
    return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [])

  const renderMainContent = () => {
    switch (activeTab) {
      case "main":
        return (
          <MainInterface
            selectedProject={selectedProject}
            selectedTemplate={selectedTemplate}
            selectedData={selectedData}
            setSelectedProject={setSelectedProject}
            setSelectedTemplate={setSelectedTemplate}
            setSelectedData={setSelectedData}
          />
        )
      case "projects":
        return (
          <ProjectManagement
            onNavigateToTemplates={() => setActiveTab("templates")}
            onNavigateToData={() => setActiveTab("data")}
          />
        )
      case "templates":
        return <TemplateManagement />
      case "data":
        return <DataManagement />
      case "results":
        return <ResultManagement onNavigateToMain={() => setActiveTab("main")} />
      case "users":
        return <UserManagement />
      default:
        return (
          <MainInterface
            selectedProject={selectedProject}
            selectedTemplate={selectedTemplate}
            selectedData={selectedData}
            setSelectedProject={setSelectedProject}
            setSelectedTemplate={setSelectedTemplate}
            setSelectedData={setSelectedData}
          />
        )
    }
  }

  return (
    <div className="flex h-screen bg-background" ref={containerRef}>
      {/* 侧边栏 */}
      <div style={{ width: `${sidebarWidth}px`, minWidth: `${sidebarWidth}px` }}>
        <Sidebar activeTab={activeTab} onTabChange={setActiveTab} />
      </div>

      {/* 调整宽度的拖动条 */}
      <div className="w-1 bg-border hover:bg-primary/50 cursor-col-resize relative z-10" onMouseDown={handleMouseDown}>
        <div className="absolute inset-0 w-3 -left-1 cursor-col-resize" />
      </div>

      {/* 主内容区 */}
      <div className="flex-1">{renderMainContent()}</div>
    </div>
  )
}
